<template>
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="main-box">
			<view class="main-box1">
				<image class="picUrl"
					style="width: 78rpx;height: 78rpx;" :src="`/static/images/categoryTip${cateId}.png`"></image>
				<!-- <image style="width: 690rpx;height: 360rpx;" src="/static/images/topTipIcon.png</image> -->
				<text class="title">{{title}}</text>
				<rich-text class="ql-editor1" :nodes="description">
				</rich-text>

				<view v-if="isRadiovalue" class="radiovalue" @tap="handleAA()">
					<image v-if="!radiovalue" style="width: 20rpx;height: 20rpx" src="/static/images/gouxuan3.png"></image>
					<image v-else style="width: 20rpx;height: 20rpx;" src="/static/images/gouxuan4.png"></image>
					<text>下次不再提示</text>
				</view>
			</view>
			<image style="width: 60rpx;height: 60rpx;margin-top: 32rpx;flex-shrink: 0;" @tap="close"
				src="/static/images/closeIcon.png"></image>
		</view>
	</uni-popup>
</template>

<script>
	import cookie from '@/utils/cookie.js'
	export default {
		name: "categoryTip",
		data() {
			return {
				isRadiovalue: false,
				radiovalue: false,
				description: '',
				cateId: 0,
				title: '',
				picUrl: '',
				cb: null
			};
		},
		methods: {
			handleAA() {
				this.radiovalue = !this.radiovalue
				this.close()
			},
			open({
				isRadiovalue = '0',
				description,
				cateId,
				title,
				picUrl
			}, cb) {
				// const pages = getCurrentPages();  
				// const page = pages[pages.length - 1];  
				// const currentWebview = page.$getAppWebview();
				// currentWebview.setStyle({  
				//   pullToRefresh: {  
				//     support: false,  
				//     style: plus.os.name === 'Android' ? 'circle' : 'default'  
				//   }  
				// });  
				// this.isSupport = !this.isSupport;
				this.isRadiovalue = Number(isRadiovalue) === 1
				this.cateId = cateId
				this.cb = cb
				if (this.isRadiovalue && cookie.get(`categoryTip${this.cateId}`)) {
					this.isRadiovalue = false
					this.cb()
					return
				}
				this.description = description
				this.title = title
				this.picUrl = picUrl
				this.$refs.popup.open()
			},
			close() {
				if (this.isRadiovalue && this.radiovalue) {
					cookie.set(`categoryTip${this.cateId}`, 1)
				}
				this.radiovalue = false
				this.$refs.popup.close()
				this.cb && this.cb()
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 690rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-height: 80vh;

		.main-box1 {
			border-radius: 40rpx;
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			position: relative;
			padding-bottom: 16rpx;

			.picUrl {
				// position: absolute;
				// top: 154rpx;
				// left: 50%;
				// transform: translateX(-50%);
				// z-index: 2;
				padding:  16rpx 0;
			}
		}

		.title {
			width: 100%;
			text-align: center;
			color: #0F0F0F;
			font-weight: bold;
			font-size: 32rpx;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
			margin-bottom: 16rpx;
		}

		.ql-editor1 {
			max-height: 45vh;
			overflow-y: auto;
		}

		.description {
			width: 100%;
			padding: 32rpx 32rpx 48rpx 32rpx;
			color: #8C8A8A;
			box-sizing: border-box;
			font-size: 32rpx;
		}

		.radiovalue {
			display: flex;
			align-items: center;
			padding-top: 16rpx;

			text {
				color: #8C8A8A;
				font-size: 18rpx;
				margin-left: 8rpx;
			}
		}
	}
</style>